<!--
 * @Description: 悟空软件
 * @Author: 悟空
 * @Date: 2020-06-04 10:53:06
 * @LastEditTime: 2023-09-06 14:18:01
 * @LastEditors: yang
-->
<template>
  <div id="employee-main-container" class="employee-index">
    <!-- 页面标题和搜索区域 -->
    <div class="page-header">
      <div class="page-title">
        <h2>招聘计划</h2>
      </div>
      <div class="header-actions">
        <div class="left-actions">
          <el-input
            v-model="search"
            placeholder="请输入计划名称"
            clearable
            size="small"
            @keyup.enter.native="searchClick">
            <template slot="append">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="searchClick">
              </el-button>
            </template>
          </el-input>
        </div>
        <div class="right-actions">
          <el-dropdown
            v-if="headerMoreHandle.length > 0"
            trigger="click"
            style="margin-left: 5px;"
            @command="headerMoreHandleClick">
            <el-button icon="el-icon-more"/>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in headerMoreHandle"
                :key="index"
                :icon="item.type === 'export' && exportLoading ? 'el-icon-loading' : item.icon"
                :command="item.type"
                :disabled="item.type === 'export' && exportLoading">
                {{ item.type === 'export' && exportLoading ? '导出中...' : item.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <el-table
        v-loading="loading || exportLoading"
        :data="list"
        :height="tableHeight"
        :cell-class-name="cellClassName"
        stripe
        border
        highlight-current-row
        @row-click="handleRowClick"
        @selection-change="handleSelectionChange">
        <el-table-column show-overflow-tooltip label="计划名称" align="center" prop="planName"/>
        <el-table-column show-overflow-tooltip label="计划编号" align="center" prop="planCode"/>
        <el-table-column show-overflow-tooltip label="招聘年份" align="center" prop="positionYear"/>
        <el-table-column show-overflow-tooltip label="状态" align="center" prop="status" :formatter="fieldFormatter"/>
        <el-table-column show-overflow-tooltip label="新建人" align="center" prop="createRealName"/>
        <el-table-column
          v-if="updateStatusAuth"
          label="操作"
          fixed="right"
          width="100">
          <template slot-scope="scope">
            <el-dropdown
              trigger="click"
              @command="handleTypeClick($event, scope.row)">
              <i class="el-icon-more table-more"/>
              <el-dropdown-menu slot="dropdown" style="width: 150px;">
                <el-dropdown-item
                  v-for="(item, index) in getRowDropdownItems(scope.row)"
                  :key="index"
                  :icon="item.icon"
                  :command="item.command">{{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>


      <div class="pagination-container">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>

    <!-- 新增/修改弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleDialogClose">
      <el-form
        ref="planForm"
        :model="planForm"
        :rules="planRules"
        label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划名称" prop="planName">
              <el-input v-model="planForm.planName" placeholder="请输入计划名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="招聘年份" prop="positionYear">
              <el-date-picker
                v-model="planForm.positionYear"
                type="year"
                placeholder="请选择招聘年份"
                format="yyyy"
                value-format="yyyy"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="计划描述" prop="description">
              <el-input
                v-model="planForm.description"
                type="textarea"
                :rows="4"
                placeholder="请输入计划描述"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
      </div>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog
      title="招聘计划详情"
      :visible.sync="detailDialogVisible"
      width="800px"
      :close-on-click-modal="false">
      <div v-if="planDetail" class="detail-content">
        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">计划名称：</span>
              <span class="value">{{ planDetail.planName || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">计划编号：</span>
              <span class="value">{{ planDetail.planCode || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">招聘年份：</span>
              <span class="value">{{ planDetail.positionYear || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">状态：</span>
              <span class="value">{{ statusValue[planDetail.status] || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="detail-row">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">新建人：</span>
              <span class="value">{{ planDetail.createRealName || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">新建时间：</span>
              <span class="value">{{ planDetail.createTime || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="detail-row">
          <el-col :span="24">
            <div class="detail-item">
              <span class="label">计划描述：</span>
              <span class="value">{{ planDetail.description || '--' }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 日志弹窗 -->
    <el-dialog
      title="上报日志"
      :visible.sync="logDialogVisible"
      width="900px"
      :close-on-click-modal="false"
      custom-class="log-dialog">
      <div v-loading="logLoading" class="log-content">
        <el-timeline v-if="logList.length > 0">
          <el-timeline-item
            v-for="(item, index) in logList"
            :key="index"
            :timestamp="item.createTime"
            placement="top"
            :color="index === 0 ? '#67C23A' : '#409EFF'"
            :icon="index === 0 ? 'el-icon-check' : 'el-icon-time'">
            <el-card class="log-card" shadow="hover">
              <div class="log-item">
                <div class="log-header">
                  <div class="log-title-wrapper">
                    <i class="el-icon-document"></i>
                    <span class="log-title">{{ item.title || '无标题' }}</span>
                    <el-tag
                      size="small"
                      :type="getLogStatusType(item.status)"
                      class="status-tag">
                      {{ getLogStatusText(item.status) }}
                    </el-tag>
                  </div>
                  <el-tag size="small" type="info">
                    <i class="el-icon-user"></i>
                    {{ item.createRealName || '--' }}
                  </el-tag>
                </div>
                <el-divider></el-divider>
                <div class="log-content-text">
                  <div class="content-label">日志内容：</div>
                  <div class="content-value">{{ item.content || '暂无内容' }}</div>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <el-empty v-else description="暂无日志记录" :image-size="120"/>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="logDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 批量导入 -->
    <plan-import
      :show="planImportShow"
      @close="planImportShow=false"
      @success="addSuccess"/>
  </div>
</template>

<script>

import {mapGetters} from 'vuex'
import {
  hrmRecruitPlanQueryListAPI,
  hrmRecruitPlanQueryByIdAPI,
  hrmRecruitPlanAddAPI,
  hrmRecruitPlanSetAPI,
  hrmRecruitPlanDeleteAPI,
  hrmRecruitPlanExportAPI,
  hrmRecruitPlanReportAPI,
  hrmRecruitPlanQueryLogAPI
} from "@/api/hrm/recruit/plan";
import {downloadExcelWithResData, isEmpty} from "@/utils";
import {Message, MessageBox} from "element-ui";
import planModel from '../model/plan'
import PlanImport from './components/PlanImport.vue'

export default {
  name: 'plan',
  components: {
    PlanImport
  },

  provide() {
    return {
      'editAuth': this.editAuth
    }
  },
  data() {
    return {
      planImportShow: false,
      loading: false, // 加载动画
      isCreate: false, // 是创建
      tableHeight: document.documentElement.clientHeight - 300, // 表的高度
      list: [],
      currentPage: 1,
      pageSize: 15,
      pageSizes: [15, 30, 60, 100],
      total: 0,
      search: '', // 搜索内容
      // 筛选宽
      popoverFilterWidth: document.documentElement.clientWidth - 80,
      /** 控制详情展示 */
      rowID: '', // 行信息
      showDview: false,
      // 高级筛选
      filterObj: {}, // 筛选确定数据
      selectionList: [], // 勾选数据 用于全局导出
      handleRowData: null, // 需要编辑的详情
      exportLoading: false, // 导出加载状态

      // 弹窗相关
      dialogVisible: false, // 新增/修改弹窗显示状态
      detailDialogVisible: false, // 详情弹窗显示状态
      logDialogVisible: false, // 日志弹窗显示状态
      dialogTitle: '新增招聘计划', // 弹窗标题
      submitLoading: false, // 提交加载状态
      logLoading: false, // 日志加载状态
      logList: [], // 日志列表

      // 表单数据
      planForm: {
        planId: null,
        planName: '',
        planCode: '',
        positionYear: '',
        status: 0,
        description: ''
      },

      // 表单验证规则
      planRules: {
        planName: [
          {required: true, message: '请输入计划名称', trigger: 'blur'},
          {min: 1, max: 200, message: '计划名称长度在 1 到 200 个字符', trigger: 'blur'}
        ],
        positionYear: [
          {required: true, message: '请选择招聘年份', trigger: 'change'}
        ],
      },

      // 详情数据
      planDetail: {
        createRealName: null,
      },

      // 状态值映射
      statusValue: planModel.statusValue
    }
  },

  computed: {
    ...mapGetters([
      'hrm'
    ]),

    // 招聘权限
    recruitAuth() {
      return this.hrm.recruit
    },

    // 新建权限
    createAuth() {
      return this.recruitAuth && this.recruitAuth.savePost
    },

    // 编辑权限
    editAuth() {
      return this.recruitAuth && this.recruitAuth.updatePost
    },

    // 详情权限
    detailAuth() {
      return this.recruitAuth && this.recruitAuth.readPost
    },

    // 更新状态
    updateStatusAuth() {
      return this.recruitAuth && this.recruitAuth.updatePostStatus
    },

    // 操作
    tabelHandles() {
      const temps = []
      temps.push({
        label: '删除',
        command: 'delete',
        icon: 'wk wk-delete'
      })
      return temps
    },
    // 有筛选内容
    hasFilterContent() {
      if (this.filterObj) {
        let hasContent = false
        const keys = Object.keys(this.filterObj)
        for (let index = 0; index < keys.length; index++) {
          const key = keys[index]
          if (this.filterObj[key] != '' &&
            this.filterObj[key] != [] &&
            this.filterObj[key] != null &&
            this.filterObj[key] != undefined) {
            hasContent = true
          }
        }
        return hasContent
      }
      return false
    },

    // 头部更多操作
    headerMoreHandle() {
      const items = []

      // 新增按钮
      if (this.createAuth) {
        items.push({
          name: '新增',
          type: 'add',
          icon: 'el-icon-plus'
        })
      }

      // 导出按钮
      items.push({
        name: '导出',
        type: 'export',
        icon: 'el-icon-download'
      })

      // 导出按钮
      items.push({
        name: '导入',
        type: 'import',
        icon: 'el-icon-top'
      })

      return items
    }
  },
  watch: {},
  created() {
    window.onresize = () => {
      this.tableHeight = document.documentElement.clientHeight - 300
    }
    this.refreshList()
  },
  mounted() {
    // 路由配置事件
    this.initTask()
  },
  methods: {

    /**
     * 搜索
     */
    searchClick() {
      this.refreshList()
    },

    /**
     * 格式化字段
     */
    fieldFormatter(row, column) {
      const valueObj = planModel[`${column.property}Value`]
      if (valueObj) {
        return valueObj[row[column.property]] || '--'
      } else {
        const value = row[column.property]
        return isEmpty(value) ? '--' : value
      }
    },

    /**
     * 导出数据
     */
    async exportData() {
      if (this.list.length === 0) {
        this.$message.warning('暂无数据可导出')
        return
      }

      // 设置导出加载状态
      this.exportLoading = true

      try {
        // 准备请求参数 - 与getList方法保持一致
        const params = {
          planName: this.search
        }

        // 处理筛选条件
        for (var key in this.filterObj) {
          params[key] = this.filterObj[key]
        }

        // 调用后端导出接口
        await hrmRecruitPlanExportAPI(params).then(res => {
          downloadExcelWithResData(res)
          Message({
            message: '导出成功',
            type: 'success'
          })
        }).catch(error => {
          console.error('导出失败:', error)
          Message.error('导出失败，请重试')
          throw error
        })
      } catch (error) {
        console.error('导出失败:', error)
        this.$message.error('导出失败，请重试')
      } finally {
        // 确保无论成功还是失败都重置 loading 状态
        this.exportLoading = false
      }
    },


    /**
     * 详情操作
     */
    detailHandle(data) {
      if (data.type === 'delete') {
        this.showDview = false
      }
      this.getList()
    },

    /**
     * 刷新
     */
    refreshList() {
      this.handleCurrentChange(1)
    },

    /**
     * addSuccess
     */
    addSuccess() {
      this.handleCurrentChange(1)
    },

    /**
     * 更改每页展示数量
     */
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },

    /**
     * 更改当前页数
     */
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    /**
     * 列表数据
     */
    getList() {
      // this.loading = true
      const params = {
        page: this.currentPage,
        limit: this.pageSize,
        planName: this.search
      }

      for (var key in this.filterObj) {
        params[key] = this.filterObj[key]
      }

      hrmRecruitPlanQueryListAPI(params)
        .then(res => {
          this.list = res.data.list
          this.total = res.data.totalRow
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },

    /**
     * 通过回调控制class
     */
    cellClassName({row, column, rowIndex, columnIndex}) {
    },

    /**
     * 列表操作
     */
    handleCommand(command) {
      // if (command === 'delete') {
      // }
    },

    /**
     * 列表点击
     */
    handleRowClick(row, column, event) {
    },

    /**
     * 勾选操作
     */
    handleSelectionChange(val) {
      this.selectionList = val // 勾选的行
    },

    /**
     * 获取行操作
     */
    getRowDropdownItems(data) {
      const dropdownItems = []
      dropdownItems.push({
        label: '详情',
        command: 'view',
        icon: 'el-icon-view'
      })
      dropdownItems.push({
        label: '修改',
        command: 'edit',
        icon: 'wk wk-edit'
      })
      dropdownItems.push({
        label: '删除',
        command: 'delete',
        icon: 'wk wk-delete'
      })
      dropdownItems.push({
        label: '日志',
        command: 'log',
        icon: 'wk wk-log'
      })
      if (data.reportStatus === 2) {
        // 导出按钮
        dropdownItems.push({
          label: '二次上报',
          command: 'report',
          icon: 'el-icon-position'
        })
      } else if (data.reportStatus === 3) {
        // 导出按钮
        dropdownItems.push({
          label: '调整上报',
          command: 'report',
          icon: 'el-icon-position'
        })
      } else if (data.reportStatus === 4) {
        // 导出按钮
        dropdownItems.push({
          label: '上报',
          command: 'report',
          icon: 'el-icon-position'
        })
      }

      return dropdownItems
    },

    handleTypeClick(command, data) {
      if (command === 'view') {
        this.viewHandle(data)
      } else if (command === 'edit') {
        this.editHandle(data)
      } else if (command === 'delete') {
        this.deleteHandle(data)
      } else if (command === 'report') {
        this.reportHandle(data)
      } else if (command === 'log') {
        this.logHandle(data)
      }
    },

    /**
     * 新增操作
     */
    addHandle() {
      this.dialogTitle = '新增招聘计划'
      this.isCreate = true
      this.resetForm()
      this.dialogVisible = true
    },

    /**
     * 修改操作
     */
    editHandle(data) {
      this.dialogTitle = '修改招聘计划'
      this.isCreate = false
      this.getPlanDetail(data.planId, (detail) => {
        this.planForm = {
          planId: detail.planId,
          planName: detail.planName,
          planCode: detail.planCode,
          positionYear: detail.positionYear,
          status: detail.status,
          description: detail.description || ''
        }
        this.dialogVisible = true
      })
    },

    /**
     * 详情操作
     */
    viewHandle(data) {
      this.getPlanDetail(data.planId, (detail) => {
        this.planDetail = detail
        this.detailDialogVisible = true
      })
    },

    /**
     * 删除操作
     */
    deleteHandle(data) {
      MessageBox.confirm(
        `确定要删除招聘计划"${data.planName}"吗？`,
        '删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.deletePlan(data.planId)
      }).catch(() => {
        // 取消删除
      })
    },

    /**
     * 查看上报日志
     */
    logHandle(data) {
      this.logLoading = true
      this.logDialogVisible = true
      this.logList = []

      hrmRecruitPlanQueryLogAPI(data.planId)
        .then(res => {
          this.logLoading = false
          this.logList = res.data || []
        })
        .catch(() => {
          this.logLoading = false
          Message.error('获取日志失败')
        })
    },

    /**
     * 获取日志状态文本
     */
    getLogStatusText(status) {
      const statusMap = {
        0: '计划新建',
        1: '上报审核',
        2: '上报通过',
        3: '上报驳回'
      }
      return statusMap[status] || '未知状态'
    },

    /**
     * 获取日志状态类型（用于标签颜色）
     */
    getLogStatusType(status) {
      const typeMap = {
        0: 'info',      // 计划新建 - 灰色
        1: 'warning',   // 上报审核 - 橙色
        2: 'success',   // 上报通过 - 绿色
        3: 'danger'     // 上报驳回 - 红色
      }
      return typeMap[status] || 'info'
    },

    /**
     * 上报操作
     */
    reportHandle(data) {
      MessageBox.confirm(
        `确定该招聘计划"${data.planName}"及计划招聘岗位上报给国资委吗？`,
        '上报确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.reportPlan(data.planId)
      }).catch(() => {
        // 取消删除
      })
    },

    /**
     * 获取计划详情
     */
    getPlanDetail(planId, callback) {
      this.loading = true
      hrmRecruitPlanQueryByIdAPI(planId)
        .then(res => {
          this.loading = false
          if (callback) {
            callback(res.data)
          }
        })
        .catch(() => {
          this.loading = false
          Message.error('获取详情失败')
        })
    },

    /**
     * 删除计划
     */
    deletePlan(planId) {
      this.loading = true
      hrmRecruitPlanDeleteAPI(planId)
        .then(res => {
          this.loading = false
          Message.success('删除成功')
          this.getList()
        })
        .catch(() => {
          this.loading = false
          Message.error('删除失败')
        })
    },

    /**
     * 上报计划
     */
    reportPlan(planId) {
      this.loading = true
      hrmRecruitPlanReportAPI(planId)
        .then(res => {
          this.loading = false
          Message.success('上报成功')
          this.getList()
        })
        .catch(() => {
          this.loading = false
          Message.error('上报失败')
        })
    },

    /**
     * 提交表单
     */
    handleSubmit() {
      this.$refs.planForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          const api = this.isCreate ? hrmRecruitPlanAddAPI : hrmRecruitPlanSetAPI
          const data = {...this.planForm}

          api(data)
            .then(res => {
              this.submitLoading = false
              Message.success(this.isCreate ? '新增成功' : '修改成功')
              this.dialogVisible = false
              this.getList()
            })
            .catch(() => {
              this.submitLoading = false
              Message.error(this.isCreate ? '新增失败' : '修改失败')
            })
        }
      })
    },

    /**
     * 重置表单
     */
    resetForm() {
      this.planForm = {
        planId: null,
        planName: '',
        planCode: '',
        positionYear: '',
        status: 0,
        description: ''
      }
      if (this.$refs.planForm) {
        this.$refs.planForm.clearValidate()
      }
    },

    /**
     * 弹窗关闭处理
     */
    handleDialogClose() {
      this.resetForm()
    },

    /**
     * 头部更多操作点击
     */
    headerMoreHandleClick(command) {
      if (command === 'add') {
        this.addHandle()
      } else if (command === 'export') {
        this.exportData()
      } else if (command === 'import') {
        this.planImportShow = true
      }
    },

    /**
     * @description: 通过路由等路由携带的需要处理的事情
     * @return {*}
     */
    initTask() {
      const {query} = this.$route
      if (query.event === 'detail') {
        this.rowID = query.id
        this.showDview = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.employee-index {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;

  .page-header {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    .page-title {
      h2 {
        margin: 0;
        color: #333;
        font-size: 20px;
        font-weight: 600;
      }
    }

    .header-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;

      .left-actions {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .right-actions {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .date-picker {
        width: 300px;
      }

      .search-btn {
        height: 40px;
        padding: 0 20px;
      }

    }
  }

  .table-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .pagination-container {
      padding: 20px;
      text-align: right;
      background: #fafafa;
      border-top: 1px solid #ebeef5;
    }
  }
}

.table-more {
  cursor: pointer;
  font-size: 16px;
  color: #909399;

  &:hover {
    color: #409eff;
  }
}

// 详情弹窗样式
.detail-content {
  .detail-row {
    margin-bottom: 20px;
  }

  .detail-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;

    .label {
      font-weight: 600;
      color: #606266;
      min-width: 100px;
      flex-shrink: 0;
    }

    .value {
      color: #303133;
      flex: 1;
      word-break: break-all;
    }
  }
}

// 弹窗样式
.dialog-footer {
  text-align: right;
  padding-top: 20px;
}

// 日志弹窗样式
.log-dialog {
  ::v-deep .el-dialog__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;

    .el-dialog__title {
      color: #fff;
      font-size: 18px;
      font-weight: 600;
    }

    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-size: 20px;

      &:hover {
        color: #f0f0f0;
      }
    }
  }

  ::v-deep .el-dialog__body {
    padding: 20px 30px;
    background: #f5f7fa;
  }
}

.log-content {
  min-height: 300px;
  max-height: 550px;
  overflow-y: auto;
  padding: 10px;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 3px;

    &:hover {
      background: #c0c4cc;
    }
  }

  .log-card {
    margin-bottom: 0;
    border-radius: 8px;
    border: none;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
    }

    ::v-deep .el-card__body {
      padding: 20px;
    }
  }

  .log-item {
    .log-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0;

      .log-title-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;

        i {
          color: #409EFF;
          font-size: 18px;
        }

        .log-title {
          font-weight: 600;
          color: #303133;
          font-size: 16px;
          line-height: 1.4;
        }

        .status-tag {
          margin-left: 4px;
          height: 24px;
          line-height: 22px;
          padding: 0 10px;
          border-radius: 12px;
          font-weight: 500;
        }
      }

      .el-tag {
        height: 28px;
        line-height: 26px;
        padding: 0 12px;
        border-radius: 14px;

        i {
          margin-right: 4px;
        }
      }
    }

    .el-divider {
      margin: 16px 0;
    }

    .log-content-text {
      .content-label {
        color: #909399;
        font-size: 13px;
        margin-bottom: 8px;
        font-weight: 500;
      }

      .content-value {
        color: #606266;
        font-size: 14px;
        line-height: 1.8;
        white-space: pre-wrap;
        word-break: break-all;
        background: #f9fafc;
        padding: 12px 16px;
        border-radius: 6px;
        border-left: 3px solid #409EFF;
      }
    }
  }

  ::v-deep .el-timeline {
    padding-left: 10px;
  }

  ::v-deep .el-timeline-item__wrapper {
    padding-left: 35px;
  }

  ::v-deep .el-timeline-item__timestamp {
    color: #909399;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;

    &.is-top {
      margin-bottom: 12px;
    }
  }

  ::v-deep .el-timeline-item__node {
    width: 16px;
    height: 16px;
    left: 0;
  }

  ::v-deep .el-timeline-item__icon {
    font-size: 12px;
  }

  ::v-deep .el-timeline-item__tail {
    left: 7px;
    border-left: 2px solid #e4e7ed;
  }

  ::v-deep .el-empty {
    padding: 60px 0;
  }
}
</style>
